<template>
  <div style="margin-top: 40px">
    <!--<el-button @click="addArticle()">添加文章</el-button>-->
    <div class="articles-area">
      <el-card style="text-align: left">
        <div v-for="article in articles" :key="article.id">
          <div style="float:left;width:85%;height: 150px;">
            <router-link class="article-link" :to="{path:'jotter/article',query:{id: article.id}}"><span style="font-size: 20px"><strong>{{article.articleTitle}}</strong></span></router-link>
            <el-divider content-position="left">{{article.articleDate}}</el-divider>
            <router-link class="article-link" :to="{path:'jotter/article',query:{id: article.id}}"><p>{{article.articleAbstract}}</p></router-link>
          </div>
          <el-image
            style="margin:18px 0 0 30px;width:100px;height: 100px"
            :src="article.articleCover"
            fit="cover"></el-image>
          <el-divider></el-divider>
        </div>
        <div class="tab-wrap">
          <div v-for="(item,index) in tabList" :key="index" :class="current == index?'select':''" @click="checkTab(index)">{{item.name}}</div>
        </div>
        <div class="schoolList-wrap" v-if="current == 0">
          <div v-for="(item,index) in schoolList" :key="index">
            <img :src="item.url" alt="">
            <div @click="goSchool(item.link)">{{item.name}}</div>
          </div>
        </div>
        <div class="teacherList-wrap" v-if="current == 1">
          <div v-for="(item,index) in teacherList" :key="index">
            <img :src="item.url" alt="">
            <div @click="goSchool(item.link)">{{item.name}}</div>
          </div>
        </div>
      </el-card>
    </div>
    
  </div>
</template>

<script>

  export default {
    name: 'Articles',
    data () {
      return {
        articles: [],
        pageSize: 4,
        total: 0,
        current: 0,
        tabList: [
          {name: '学校分类', id: 1},
          {name: '教师分类', id: 2}
        ],
        schoolList: [
          {name: '厦门理工学院', url: '../../../static/img/carousel/XMUT.png', id: 1, link: 'https://www.xmut.edu.cn/'},
          {name: '厦门大学', url: '../../../static/img/carousel/XDUT.jpg', id: 2, link: 'https://www.xmu.edu.cn/'},
          {name: '集美大学', url: '../../../static/img/carousel/JMUT.png', id: 3, link: 'https://www.jmu.edu.cn/'},
          {name: '福建工程学院', url: '../../../static/img/carousel/FJUT.png', id: 4, link: 'https://www.fjut.edu.cn/'}
        ],
        teacherList: [
          {name: '冯然', url: '../../../static/img/carousel/fr.png', link: 'https://www.icourse163.org/u/mooc95311242600763220?userId=1390878849', id: 1},
          {name: '邓倩妮', url: '../../../static/img/carousel/dqn.jpg', link: 'https://www.icourse163.org/u/mooc39309999565849782?userId=1399162403', id: 2},
          {name: '唐飞龙', url: '../../../static/img/carousel/tfl.jpg', link: 'https://www.icourse163.org/u/mooc14152211232366028?userId=1411007433', id: 3},
          {name: '陈全', url: '../../../static/img/carousel/cq.jpg', link: 'https://www.icourse163.org/u/mooc7334662711691127?userId=1406173529', id: 4}
        ]
      }
    },
    mounted () {
      this.loadArticles()
    },
    methods: {
      loadArticles () {
        var _this = this
        this.$axios.get('/article/' + this.pageSize + '/1').then(resp => {
          if (resp && resp.data.code === 200) {
            _this.articles = resp.data.result.content
            _this.total = resp.data.result.totalElements
          }
        })
      },
      handleCurrentChange (page) {
        var _this = this
        this.$axios.get('/article/' + this.pageSize + '/' + page).then(resp => {
          if (resp && resp.data.code === 200) {
            _this.articles = resp.data.result.content
            _this.total = resp.data.result.totalElements
          }
        })
      },
      checkTab (index) {
        this.current = index
      },
      goSchool (link) {
        window.location.href = link
      }
    }
  }
</script>

<style scoped>
  .articles-area {
    width: 990px;
    height: 750px;
    margin-left: auto;
    margin-right: auto;
  }

  .article-link {
    text-decoration: none;
    color: #606266;
  }

  .article-link:hover {
    color: #409EFF;
  }
  .tab-wrap {
    display: flex;
    width: 1000px;
    margin: 30px auto;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    line-height: 50px;
    font-size: 16px;
    border-radius: 100px;
    overflow: hidden;
  }
  .tab-wrap>div {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
  .tab-wrap .select {
    background: #ccc;
    color: #fff;
  }
  .schoolList-wrap,.teacherList-wrap {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .schoolList-wrap>div {
    margin-right: 80px;
  }
  .teacherList-wrap>div {
    margin-right: 100px;
  }
  .schoolList-wrap>div:nth-child(2n) {
    margin-right: 0;
  }
  .teacherList-wrap>div:nth-child(6n) {
    margin-right: 0;
  }
  .schoolList-wrap img,.teacherList-wrap img {
    width: 360px;
    height: 200px;
    display: block;
  }
  .teacherList-wrap img {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  .schoolList-wrap>div>div {
    width: 130px;
    margin: 0 auto;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: yellow;
    font-size: 16px;
    line-height: 36px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
  }
  .teacherList-wrap>div>div {
    width: 60px;
    margin: 0 auto;
    height: 26px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: yellow;
    font-size: 12px;
    line-height: 26px;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
  }
</style>
